<template>
  <div>
    <input v-model="searchVal" type="text" placeholder="搜索">
    <input v-model="searchVal2" type="text" placeholder="搜索">
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, computed, watch} from 'vue'

let searchVal = ref<string>('')
let searchVal2 = ref<string>('')<template>
<div>
    <input v-model="searchVal" type="text" placeholder="搜索">
    <br>
        <table border width="600" cellpadding="20" >
    <tr>
        <th>名称</th>
    <th>单价</th>
    <th>数量</th>
    <th>总价</th>
    <th>操作</th>
    </tr>
    <tr v-for="(item, index) in searChList ">
    <td>{{ item.name }}</td>
<td>{{ item.price }}</td>
<td>
<button @click.prevent="item.num > 1 ? item.num -- : null ">-</button>
{{ item.num }}
<button @click.prevent="item.num < 99 ? item.num ++ : null ">+</button>
    </td>
    <td>{{ item.price * item.num }}</td>
<td>
<button @click.preven="del(index)">删除</button>
</td>
</tr>
<tr>
<td colspan="5" align="right">总价： {{ total }}</td>
</tr>
</table>
</div>
</template>

<script setup lang="ts">
import {ref, reactive, computed} from 'vue'

interface Data {
  name: string,
  price: number,
  num: number,
}

let list = reactive<Data[]>([
  {
    name: 'apple',
    price: 100,
    num: 1,
  },
  {
    name: 'banana',
    price: 20,
    num: 2,
  },
  {
    name: '帽子',
    price: 50,
    num: 1,
  }
])

let searchVal = ref<string>('')

let asd = reactive<Data>({
  name: 'asd',
  price: 18,
  num: 1
})

let searChList = computed(() => {
  return list.filter((item:Data) => item.name.includes(searchVal.value))
})

let total= computed(() => {
  return  list.reduce((pre: number, cur: Data) => {
    return pre + cur.price * cur.num
  }, 0)
})



const del = (index: number) => {
  list.splice(0, index)
}





</script>

<style scoped>
</style>


watch(searchVal, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})

</script>

<style scoped>
</style>
